import React from 'react'
import { CSSTransition } from 'react-transition-group'
import './FadeTransition.css'

/**
 * 一个淡入淡出组件
 * 
 */



export default function FadeTransition(props) {

    const addTransitionNode = (node) => {
        node.style.transition = `opacity ${props.timeout}`;
    }

    const removeTransitionNode = (node) => {
        node.style.transition = '';
    }

    return (
        <CSSTransition
            {...props}
            onEnter={addTransitionNode}
            onEntered={(node, isAppear) => {
                removeTransitionNode(node)
                props.onEntered && props.onEntered(node, isAppear)
            }}
            onExit={addTransitionNode}
            onExited={node => {
                removeTransitionNode(node)
                props.onExited && props.onExited(node)
            }}
            classNames='fade'
        />
    )

}

FadeTransition.defaultProps = {
    timeout: 500,
}